import React from 'react'
import PropTypes from 'prop-types'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimes } from '@fortawesome/free-solid-svg-icons'
import { classnames } from '../utils'
import './TabList.scss'
const TabList = ({ files, activeId, unsaveIds, onTabClick, onCloseTab }) => {
  return (
    <ul className="nav nav-pills tab-list-conponent">
      {
        files.map(r => {
          const isUnsave = unsaveIds.includes(r.id)
          const navLinkClass = classnames({
            'nav-link': true,
            'active': activeId === r.id,
            'withUnsaved': isUnsave
          })
          return (
            <li
              key={r.id}
              className="nav-item"
              onClick={(e) => { e.preventDefault(); onTabClick(r.id) }}
            >
              <a className={navLinkClass} href="javascript">
                {r.title}
                <span className="close-icon" onClick={(e) => { e.stopPropagation(); onCloseTab(r.id) }}>
                  <FontAwesomeIcon icon={faTimes} />
                </span>
                {
                  isUnsave && <span className="rounded-circle unsaved-icon"></span>
                }
              </a>
            </li>
          )
        })
      }
    </ul>
  )
}
TabList.propTypes = {
  files: PropTypes.array,
  activeId: PropTypes.string,
  unsaveIds: PropTypes.array,
  onTabClick: PropTypes.func,
  onCloseTab: PropTypes.func
}
TabList.defaultProps = {
  unsaveIds: []
}
export default TabList